<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #canvas_div {
            margin-left: 0px;
            width: 1000px;
            height: 640px;
        }
        #NPC_canvas {
            position : absolute;
            z-index : 2;
        }
        #background_canvas {
            position : absolute;
            z-index : 1;
        }
        #debug_map_canvas {
            margin-left: 950px;
            position : absolute;
            z-index : 3;
        }
        #text
        {   
            margin-left: 305px;
            background-color: #000000;
        }
        #dialog
        {   
            margin-top: -500px;
            margin-left: 950px;
        }
        #debug_level
        {   
            background-color: #F2F5A9;
        }
        img.assets {
            display : none
        }
    </style>
</head>
<body onload="load();">
    <div id="canvas_div">
        <canvas id="debug_level" width="300" height="640" style="border:1px solid #000000">
        </canvas>
        <canvas id="background_canvas" width="640" height="640">
        </canvas>
        <canvas id="NPC_canvas" width="640" height="640">
        </canvas>
        <canvas id="debug_map_canvas" width="160" height="160">
        </canvas>
        <canvas id="dialog" width="380" height="440" >
        </canvas>
    </div>
    <div id="game_info_div">
         <canvas id ="text" width ="640" height="60" style="border:1px solid #000000">
        </canvas>
    </div>
    <div id="level2_info_div">
            <canvas id ="level2_canvas" width ="1080" height="1080" style="border:1px solid #000000">
        </canvas>
    </div>

    <img id="sprites" class ="assets" src="assets/NPCs/NPCs_normal_sprites.png"/>
    <img id="armyGovt" class ="assets" src="assets/Regions/armyGovt.png"/>
    <img id="playerHouse" class ="assets"src="assets/Regions/playerHouse.png"/>
    <img id="rebelHQ" class ="assets"src="assets/Regions/rebelHQ.png"/>
    <img id="tvStation" class ="assets"src="assets/Regions/TVstation.png"/>
    <img id="tvStation2" class ="assets"src="assets/Regions/TVstation2.png"/>
    <img id="blackMarket" class ="assets"src="assets/Regions/blackMarket.png"/>
    <img id="street1" class ="assets"src="assets/Regions/street1.png"/>
    <img id="inGovt" class="assets" src="assets/Buildings/inGovt.png"/>
    <img id="inArmyHQ" class="assets" src="assets/Buildings/inArmyHQ.png"/>
    <img id="inHome" class="assets" src="assets/Buildings/inHome.png"/>
    <img id="inRebelHQ" class="assets" src="assets/Buildings/inRebelHQ.png"/>
    <img id="inTvStation" class="assets" src="assets/Buildings/inTvStation.png"/>
    <img id="inBlackMarket" class="assets" src="assets/Buildings/inBlackMarket.png"/>

    <script type="text/javascript" src="assets/NPCs/NPCs_normal_sprites.js"></script>
    <script type="text/javascript" src="assets/Regions/obstacleMap.js"></script>

    <script type="text/javascript" src="main.js"></script>

    <script type="text/javascript" src="Abstraction/controller.js"></script>
    <script type="text/javascript" src="Abstraction/distribution.js"></script>
    <script type="text/javascript" src="Abstraction/level_3.js"></script>
    <script type="text/javascript" src="Abstraction/level_2.js"></script>
    <script type="text/javascript" src="Abstraction/level_1.js"></script>
    <script type="text/javascript" src="Gameboard/text.js"></script>


    <script type="text/javascript" src="js/SceneGraph/Map.js"></script>
    <script type="text/javascript" src="js/SceneGraph/Grid.js"></script>
    <script type="text/javascript" src="js/SceneGraph/Building.js"></script>
    <script type="text/javascript" src="js/SceneGraph/Camera.js"></script>
    <script type="text/javascript" src="js/SceneGraph/NPCs/NPC.js"></script>
    <script type="text/javascript" src="js/SceneGraph/NPCs/Player.js"></script>
    <script type="text/javascript" src="js/SceneGraph/NPCs/Army.js"></script>
    <script type="text/javascript" src="js/SceneGraph/NPCs/Rebel.js"></script>
    <script type="text/javascript" src="js/SceneGraph/NPCs/Spy.js"></script>
    <script type="text/javascript" src="js/SceneGraph/NPCs/Merchant.js"></script>
    <script type="text/javascript" src="js/SceneGraph/NPCs/Citizen.js"></script>

    <script type="text/javascript" src="js/util/PathFinder.js"></script>

    <script type="text/javascript" src="js/RenderingEngine.js"></script>
    <script type="text/javascript" src="js/InputManager.js"></script>
    <script type="text/javascript" src="js/Probability.js"></script>
    <script type="text/javascript" src="js/Interaction.js"></script>

    <script type="text/javascript">
        function loadTestCase() {
            conv_type = 1;
            army1 = new Army();
            var grid = map.getGridById(0,0);
            var army1_arg = {
                x: 0,
                y: 1,
                type : "Army",
                grid : grid
            };
            army1.init(army1_arg);
            grid.addNPC(army1)

            rebel1 = new Rebel();
            var grid = map.getGridById(0,0);
            var rebel1_arg = {
                x: 0,
                y: 2,
                type : "Rebel",
                grid : grid
            };
            rebel1.init(rebel1_arg);
            grid.addNPC(rebel1)

            merchant1 = new Merchant();
            var grid = map.getGridById(0,0);
            var merchant1_arg = {
                x: 0,
                y: 3,
                type : "Merchant",
                grid : grid
            };
            merchant1.init(merchant1_arg);
            grid.addNPC(merchant1);

            spy1 = new Spy();
            var grid = map.getGridById(0,0);
            var spy1_arg = {
                x: 0,
                y: 4,
                type : "Spy",
                grid : grid
            };
            spy1.init(spy1_arg);
            grid.addNPC(spy1)

            citizen1 = new Citizen();
            var grid = map.getGridById(0,0);
            var citizen1_arg = {
                x: 0,
                y: 5,
                type : "Citizen",
                grid : grid
            };
            citizen1.init(citizen1_arg );
            grid.addNPC(citizen1 );

            citizen2 = new Citizen();
            var grid = map.getGridById(0,0);
            var citizen2_arg = {
                x: 0,
                y: 6,
                type : "Citizen",
                grid : grid
            };
            citizen2.init(citizen2_arg );
            grid.addNPC(citizen2 );
        }
        function init() {
//            playerHouseImg = document.getElementById("player_house");
//            rebelHQImg = document.getElementById("rebel_hq");
//            armyGovtImg = document.getElementById("army_govt");
//            tvStationImg = document.getElementById("tv_station");
            NPCsSpritesImage = document.getElementById("sprites");

            // camera
            var camera_args = {
                sx : 0,
                sy : 0,
                w : 10,
                h : 10
            };
            camera.init(camera_args);

            // map
            var grids = [];
            for (var i=0; i<10; i++) {
                var newRow = [];
                for (var j=0; j<10; j++) {
                    var grid = {
                        type : "armyGovt",
                        NPCs : {},
                        buildings : {}
                    };
                    newRow.push(grid);
                }
                grids.push(newRow);
            }
            grids[0][0].NPCs = {
                Army : [
                    {
                        x : 7,
                        y : 0,
                        type : "Army"
                    }
                ],
                Player : [
                    {
                        x : 5,
                        y : 4,
                        type : "Player"
                    }
                ]
            };
            var map_args = {
                row : 10,
                col : 10,
                grids : grids
            };
            map.init(map_args);

            // rendering engine
            var rendering_args = {
                NPC_canvas : "NPC_canvas",
                background_canvas : "background_canvas",
                debug_map_canvas : "debug_map_canvas",
                map : map,
                player : player
            };
            renderingEngine.init(rendering_args);
            setInterval(renderingEngine.render, 200);

            // input manager
            var input_args = {
                canvas : "NPC_canvas",
                player : player,
                camera : camera
            };
            inputManager.init(input_args);
            setInterval(inputManager.processEntry, 100);
        }
    </script>

</body>
</html>